<template>
    <div>
        <Upload
        multiple
        type="drag"
        name="avater"
        action="http://localhost:3000/upload/upload">
        <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>点击或将文件拖拽到这里上传</p>
        </div>
    </Upload>
    

        <Button type="primary" @click="onAdd">添加</Button>
        <Input v-model="filter.name">
            <!-- <Select v-model="select3" slot="prepend" style="width: 80px">
                <Option value="day">日活</Option>
                <Option value="month">月活</Option>
            </Select> -->
            <Button slot="append" icon="ios-search" @click="onSearch"></Button>
        </Input>
        <Button type="error" @click="onDeletes">删除多条记录</Button>

        <Table border :columns="columns" :data="filter.list" @on-selection-change="onSelectionChange"></Table>
        <Page :total="filter.total" size="small"
         show-total show-elevator show-sizer
         @on-change="onChange"
         @on-page-size-change="onPageSizeChange"></Page>

        <Modal
            v-model="modal"
            title="数据操作"
        >
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">

                <FormItem label="ID" prop="_id">
                    <Input v-model="formValidate._id" placeholder="请输入ID"></Input>
                </FormItem>
                <FormItem label="图片名" prop="originalname">
                    <Input v-model="formValidate.originalname" placeholder="图片名"></Input>
                </FormItem>
                
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem> 
            </Form>
        </Modal>

    </div>
</template>
<script>
import base from '../.././common/base'

    export default {
        mixins:[base],
        data () {
            return {
                module:'upload',

                formValidate: {
                    _id: '',
                    originalname: '',
                    encoding: '',
                    path: '',
                    size: [],
                    date: ''
                    // time: '',
                    // desc: ''
                },
                ruleValidate: {
                    _id: [
                        { required: true, message: '不能为空', trigger: 'blur' }
                    ],
                    originalname: [
                        { required: true, message: '不能为空', trigger: 'blur' },
                    ],
                    encoding: [
                        { required: true, message: '请选择', trigger: 'change' }
                    ],
                    path: [
                        { required: true, message: '请选择', trigger: 'change' }
                    ],
                    size: [
                        { required: true, message: '请选择', trigger: 'change' }
                    ],
                    date: [
                        { required: true, type: 'date', message: '请选择日期', trigger: 'change' }
                    ],
                    // time: [
                    //     { required: true, type: 'date', message: '请选择时间', trigger: 'change' }
                    // ],
                    // desc: [
                    //     { required: true, message: '请输入个人介绍', trigger: 'blur' },
                    //     { type: 'string', min: 20, message: '介绍不能少于20字', trigger: 'blur' }
                    // ]
                },

                columns: [
                     {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'ID',
                        key: '_id',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row._id)
                            ]);
                        }
                    },
                    {
                        title: '图片名',
                        key: 'originalname'
                    },
                    {
                        title: '图片格式',
                        key: 'encoding'
                    },
                    {
                        title: '图片路径',
                        key: 'path'
                    },
                    {
                        title: '图片大小',
                        key: 'size'
                    },
                    {
                        title: '时间',
                        key: 'date'
                    },
                    {
                        title: '增删改查',
                        key: 'data',
                        width: 240,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'success',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.onAdd()
                                        }
                                    }
                                }, '添加'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.row)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            // console.log(params.row._id)
                                            
                                            this.remove(params.row._id)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ]
            }
        }
    }
</script>